.raceWrap {
    padding-bottom: 80rem;

    // tabs
    .raceTabs {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 45rem;

        .raceTabItem {
            height: 100%;
            flex: 1;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            font-size: 16rem;
            font-weight: 500;
            color: #343C4B;
            background: #D1D9E8;

            .tips {
                margin-left: 16rem;
                min-width: 20rem;
                height: 20rem;
                line-height: 20rem;
                text-align: center;
                border-radius: 10rem;
                color: #FFF;
                background: #FF2D55;
            }

            &.active {
                background: #FF6F1E;
                color: #FFF;

                .tips {
                    background: #FFDCE5;
                    color: #FF2D55;
                }
            }
        }
    }

    .betAction {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12rem 16rem 12rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;

        .winningRemark {
            display: flex;
            align-items: center;

            span {
                color: #707A8C;
                font-family: Inter;
                font-size: 14rem;
                margin-left: 6rem;
            }
        }

        .bet {
            width: 136rem;
            margin-left: 12rem;
        }

        .reset {
            background: #FFE8EE;
            width: 88rem;
            color: #FF2D55;
            border: none;
            margin-left: 25rem;
        }
    }

    .bottomMap {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99;
        padding: 12rem 18rem 12rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;

        .left {
            display: flex;
            flex-direction: row;
            align-items: center;
            color: #797B89;
            font-size: 14rem;

            .money {
                color: #FF2D55;
                font-size: 20rem;
                font-weight: 600;
            }
        }

        .right {
            display: flex;
            flex-direction: row;

            .btn {
                ::v-deep(.van-button__text) {
                    color: #FF2D55;
                    font-weight: 600;
                    font-size: 14rem;
                }
            }

            .status {
                margin-left: 18rem;
                width: 10rem;
                border-radius: 6px;
                border: 1rem solid #CBD5E0;
                background: #D9E4EE;
                flex: 1;
                position: relative;

                &>span {
                    display: inline-block;
                    width: 10rem;
                    height: 10rem;
                    border-radius: 50%;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    z-index: 1;
                    background: #FFF;
                }
            }
        }
    }

    .confirmBetPop {
        .popTitle {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            height: 40rem;

            &>div {
                color: #343C4B;
                font-size: 16rem;
                font-weight: 600;
                background: linear-gradient(174deg, rgba(255, 175, 195, 0.15) 4.56%, #FFF 124.49%);
            }

            .closeIcon {
                position: absolute;
                top: 10rem;
                right: 10rem;
            }
        }

        .centerContent {
            padding: 16rem 24rem 24rem 24rem;
            box-sizing: border-box;

            .betDetail {
                width: 80%;
                margin: 0 auto;

                .detailRow {
                    .rowWrap {
                        display: flex;
                        flex-direction: column;
                        color: #707A8C;
                        font-size: 14rem;
                        margin-top: 15rem;
                        max-height: 260rem;
                        overflow-y: scroll;

                        .rowData {
                            margin-top: 15rem;
                            display: flex;
                            flex-direction: row;
                            justify-content: space-around;
                        }

                        :first-child {
                            color: #343C4B;
                            margin-left: 2rem;
                        }

                        .money {
                            color: #FF6F1E;
                            margin-left: 18rem;
                        }
                    }

                    &>div {
                        color: #707A8C;
                        font-size: 14rem;
                        margin-top: 15rem;
                        display: flex;

                        :first-child {
                            color: #343C4B;
                            margin-left: 2rem;
                        }

                        .money {
                            color: #FF6F1E;
                            margin-left: 18rem;
                        }
                    }

                    .period {
                        color: #FF2D55 !important;
                    }

                    .totalMoney {
                        color: #FF2D55 !important;
                        text-align: center;
                        font-family: Inter;
                        font-size: 18rem;
                        font-style: normal;
                        font-weight: 600;
                    }
                }
            }

            .operateBtn {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 24rem;

                .cancel {
                    width: 156rem;
                    color: #FF2D55;
                    font-size: 16rem;
                    background: #FFE8EE;
                    border: none;
                }

                .confirm {
                    width: 156rem;
                }
            }
        }

        .remarkContent {
            padding: 16rem;
            box-sizing: border-box;

            .titleName {
                color: #FF2D55;
                font-family: Inter;
                font-size: 14rem;
                font-style: normal;
                font-weight: 600;
                margin-top: 5rem;
            }

            .contentDetail {
                color: #707A8C;
                font-family: Inter;
                font-size: 14rem;
                margin-top: 5rem;
                line-height: 24rem;
            }
        }
    }
}